<aca-page-layout>
  <div class="aca-page-layout-header">
    <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | translate }}</h1>
    <aca-toolbar [items]="actions"></aca-toolbar>
  </div>

  <div class="aca-page-layout-content">
    <div class="main-content">
      <adf-document-list
        #documentList
        acaDocumentList
        acaContextActions
        [currentFolderId]="'-mysites-'"
        [selectionMode]="'single'"
        [navigate]="false"
        [sorting]="['title', 'asc']"
        [sortingMode]="'client'"
        [imageResolver]="imageResolver"
        (node-dblclick)="handleNodeClick($event)"
        (name-click)="handleNodeClick($event)"
      >
        <adf-custom-empty-content-template>
          <adf-empty-content
            icon="library_books"
            [title]="'APP.BROWSE.LIBRARIES.EMPTY_STATE.FILE_LIBRARIES.TITLE'"
            subtitle="APP.BROWSE.LIBRARIES.EMPTY_STATE.FILE_LIBRARIES.TEXT"
          >
          </adf-empty-content>
        </adf-custom-empty-content-template>

        <data-columns>
          <ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
            <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
              <data-column
                [key]="column.key"
                [title]="column.title"
                [type]="column.type"
                [format]="column.format"
                [class]="column.class"
                [sortable]="column.sortable"
                [isHidden]="column.isHidden"
              >
                <ng-template let-context>
                  <adf-dynamic-column [id]="column.template" [context]="context"> </adf-dynamic-column>
                </ng-template>
              </data-column>
            </ng-container>

            <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
              <data-column
                [key]="column.key"
                [title]="column.title"
                [type]="column.type"
                [format]="column.format"
                [class]="column.class"
                [sortable]="column.sortable"
                [isHidden]="column.isHidden"
              >
              </data-column>
            </ng-container>
          </ng-container>
        </data-columns>
      </adf-document-list>

      <adf-pagination acaPagination [target]="documentList"> </adf-pagination>
    </div>

    <div class="aca-sidebar" *ngIf="infoDrawerOpened$ | async">
      <aca-info-drawer [node]="$any(selection).library"></aca-info-drawer>
    </div>
  </div>
</aca-page-layout>
